<style>
body {
  background-color: white;
}
.card {
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  box-shadow: rgba(1, 0, 1, 0.4) 00px 20px 40px,
              rgba(1, 0, 1, 0.4) 00px 00px 30px;
  background-color: rgb(255, 255, 255);
}
.card2 {
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  box-shadow: rgba(255, 0, 0, 1) 00px 20px 100px 20px;
  background-color: rgb(255, 255, 255);
  margin: 50px;
}
.card3 {
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  box-shadow: rgba(1, 0, 1, 0.4) 00px 00px 30px;
  background-color: rgb(255, 255, 255);
}
.card4 {
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  box-shadow: rgba(1, 0, 1, 0.4) 00px 00px 30px,
              rgba(1, 0, 1, 0.4) 00px 20px 40px;
  background-color: rgb(255, 255, 255);
}
</style>
<div class="card">card</div>
<br><br>
<div class="card2">card2</div>
<br><br>
<div class="card3">card3</div>
<br><br>
<div class="card4">card4</div>

